.ph-drowdown-list{
    position:absolute;
    top: 0;
    left:0;
    width:auto;
    max-height: calc(var(--phx) * 20);
    overflow: auto;
    box-shadow:0px 1px var(--ph-10) rgb(0 0 0 / 20%);
    white-space:normal;
    display: flex;
    flex-direction: column;
    border:none;
    background-color:#fff;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom:0;
    --ph-dd-color-active: var(--ph-theme);
    &-dark{
        --ph-dd-action-bg:var(--ph-dark-l1);
        --ph-dd-bg: var(--ph-dark);
        --ph-dd-bg-hover: var(--ph-dark-d1);
        --ph-dd-bg-active: var(--ph-dark-d1);
        --ph-dd-bd:#ffffff11;
        --ph-dd-color: var(--ph-c-l1);
        --ph-dd-color-hover: var(--ph-c-l2);
        --ph-dd-color-active: var(--ph-c-light);
    }
    
    &-light,
    &-primary,
    &-success,
    &-danger,
    &-warning{
        --ph-dd-action-bg:var(--ph-light);
        --ph-dd-bg: var(--ph-light-light);
        --ph-dd-bg-hover: var(--ph-light-l1);
        --ph-dd-bg-active: var(--ph-light-l1);
        --ph-dd-color: var(--ph-c);
        --ph-dd-color-hover: var(--ph-c-d1);
        --ph-dd-bd:var(--ph-bd-light);
    }
    &-primary{
        --ph-theme:var(--ph-primary)
    }
    &-success{
        --ph-theme:var(--ph-success)
    }
    &-danger{
        --ph-theme:var(--ph-danger)
    }
    &-warning{
        --ph-theme:var(--ph-warning)
    }
    .ph-action-bar{
        background-color: var(--ph-dd-action-bg);
        color: var(--ph-dd-color-hover);
    }
    .ph-action-bar.ph-list-header{
        border-bottom-color: var(--ph-dd-bd);
    }
    .ph-action-bar.ph-list-footer{
        border-top-color: var(--ph-dd-bd);
    }
    background-color:var(--ph-dd-bg);

    .ph-dropdown-item{
        background-color: var(--ph-dd-bg);
        color: var(--ph-dd-color);
        border-color: var(--ph-dd-bd);
        margin-top: -1px;
        padding-left: var(--phx);
        padding-right: var(--phx);
        display:block;
        &:hover{
            background-color: var(--ph-dd-bg-hover);
            color: var(--ph-dd-color-hover);
        }
        &[active=true]{
            color: var(--ph-dd-color-active);
            background-color: var(--ph-dd-bg-active);
        }
    }
}
.ph-dropdown-as{
    .ph-actionsheet{
        box-shadow:0px 1px var(--ph-10) rgb(0 0 0 / 40%);
        border-radius: var(--ph-10) var(--ph-10) 0 0;
        overflow: hidden;
    }
    .ph-drowdown-list{
        position: relative;
        box-shadow:none;
        top:auto;
        .ph-dropdown-item{
            border-left:none;
            border-right:none;
        }
    }
}